25 - Sélecteurs CSS avancés

Sélecteurs d'attribut

Les sélecteurs d'attribut permettent de cibler un élément par un de ses attributs ou par la valeur d'un de ses attributs :

            

                /* Sélectionne les éléments <a> possédant un attribut title */
                a[title] {
                    color: red;
                }

                /* Sélectionne les éléments <img> avec un attribut src dont la valeur est "chat.jpg" */
                img[src="chat.jpg"] {
                    cursor: pointer;
                }

            
        

Sélecteur adjacent

Le sélecteur adjacent permet de sélectionner un élément situé après un autre :

            

                /* Sélectionne les éléments <p> situés après un élément <ul> */
                ul + p{
                    color: red;
                }

            
        

Les pseudos classes

Les pseudos classes sont des sélecteurs spéciaux permettant d'indiquer qu'un élément doit être dans un état spécifique pour être sélectionné.

            

                /* La pseudo classe "hover" permet d'appliquer des styles uniquement si l'élément est survolé par la souris */
                p:hover{
                    color: red;
                }

                /* La pseudo classe "active" permet d'appliquer des styles uniquement si l'élément est en train d'être cliqué */
                p:active{
                    color: blue;
                }

                /* La pseudo classe ":visited" permet de sélectionner les liens ayant déjà été visités */
                a:visited{
                    color: grey;
                }

                /* La pseudo classe ":link" permet de sélectionner les liens pas encore visités */
                a:link{
                    color: gold;
                }

                /* Sélectionne uniquement le premier enfant de l'élément parent (dans cet exemple le premier li de chaque ul) */
                ul > li:first-child{
                    color: pink;
                }

                /* Sélectionne uniquement le dernier enfant de l'élément parent (dans cet exemple le dernier li de chaque ul) */
                ul > li:last-child{
                    color: orange;
                }

                /* Sélectionne uniquement le xème enfant de l'élément parent (dans cet exemple le 2ème li de chaque ul) */
                ul > li:nth-child(2){
                    color: yellow;
                }

                /* Sélectionne tous les éléments ne correspondant pas au test (dans cet exemple, sélectionne tous les h2 n'ayant pas la classe "red") */
                h2:not(.red){
                    color: green;
                }

            
        

Liste complète des pseudo-classes : https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes

Aller plus loin

Il existe plein de sélecteurs avancés en CSS, voici un article pour pousser plus loin la découverte ! https://code.tutsplus.com/fr/tutorials/the-30-css-selectors-you-must-memorize--net-16048